<template>
    <a-flex gap="middle" justify="space-between" align="center" style="width: 100%;">
        <a-flex gap="middle" align="center">
            <router-link :to="`/profile/${user.id}`">

                <a-avatar :size="48" :src="user.avatarUrl">
                    <template #icon>
                        <UserOutlined />
                    </template>
                </a-avatar>
            </router-link>

            <a-flex vertical>
                <a-typography-text style="text-overflow: ellipsis;max-width: 100%;">
                    <router-link :to="`/profile/${user.id}`">{{ user.nickname }}</router-link>
                </a-typography-text>
                <a-typography-text style="font-size: 12px;" type="secondary">{{ user.intro
                    }} &nbsp;&nbsp;&nbsp;&nbsp;{{ user.fansCount }}粉丝</a-typography-text>
            </a-flex>
        </a-flex>
        <UserFollowBtn :user="user"></UserFollowBtn>
    </a-flex>
</template>
<script setup lang="ts">
import request from '@/script/utils/request'; // 导入Axios实例
import { ref } from 'vue';
import UserFollowBtn from '@/components/user/UserFollowBtn.vue';
const props = defineProps({
    user: {
        type: Object
    }
})
</script>
